<!-- reply tab -->
<div class="tab-pane fade active in" id="panelReply">
	<div class="row-fluid">
		<div class="span2">
			<label for="caseReply">Enter Reply</label>
		</div>
		<div class="span10">
			<textarea class="bigTextarea" name="caseReply" id="caseReply" placeholder="This is the reply seen by the customer"></textarea>
		</div>
	</div>
	<div class="row-fluid">
		<div class="span2 offset2">
			<label><input type="radio" name="replyType" id="cbxInterim">Interim Reply</label>
		</div>
		<div class="span2">
			<label><input type="radio" name="replyType" id="cbxInterim">Final Reply</label>
		</div>
		<div class="span5 offset1">
			<label for="#ddlInformedCustomer" style="float:left;">Informed Customer?</label>
			<select name="informedCustomer" id="ddlInformedCustomer" style="float:right; width:50%;">
				<option value="yes">YES</option>
				<option value="No">NO</option>
			</select>
		</div>
	</div>
	<div class="row-fluid">
		<div class="span2"><label for="#replyRemarks">Remarks (Internal)</label></div>
		<div class="span10">
			<textarea class="bigTextarea" name="replyRemarks" id="replyRemarks" placeholder="These remarks will not be visible to the customer"></textarea>
		</div>
	</div>
	<button id="btnSubmitReply" type="button" class="pure-button pure-button-primary tailButton" onclick="submitReply()">Submit</button>
</div>
<!-- reroute tab -->
<div class="tab-pane fade" id="panelReroute">
	<div class="row-fluid">
		<div class="span6">
			<div class="span4">
				<label for="autoComp">Category Search</label>
			</div>
			<div class="span8">	
				<!-- input for Category keywords. MUST USE 'autoComp' because the id in js is that -->
				<input type="text" class="tbx100" id="autoComp" placeholder="Enter keyword for categories...">
			</div>
		</div>
		<div class="span6">
			<div class="span4">
				<label for="autoComp-category">Category</label>
			</div>
			<div class="span8">
				<span id="autoComp-category" class="autoCome"></span>
			</div>
		</div>
	</div>
	<div class="row-fluid">
		<div class="span6">
			<div class="span4">
				<label for="autoComp-agency">Target Agency</label>
			</div>
			<div class="span8">
				<select id="autoComp-agency">
					<option value="AVA">AVA</option>
					<option value="HDB">HDB </option>
					<option value="LTA">LTA</option>
					<option value="NEA">NEA</option>
					<option value="NPARKS">NPARKS</option>
					<option value="PUB">PUB</option>
					<option value="SPF">SPF</option>
				</select>
			</div>
		</div>
		<div class="span6">
			<div class="span4">
				<label for="autoComp-subCate">Sub Category</label>
			</div>
			<div class="span8">
				<span id="autoComp-subCate" class="autoCome"></span>			
			</div>
		</div>
	</div>
	<div class="row-fluid">
		<div class="span2"><label for="#rerouteRemarks">Remarks</label></div>
		<div class="span10">
			<textarea name="rerouteRemarks" id="rerouteRemarks" class="bigTextarea"></textarea>
		</div>
	</div>
	<dov class="row-fluid">
		<button type="submit" class="pure-button pure-button-primary tailButton">Send</button>
	</dov>
</div>
<!-- link cases tab -->
<div class="tab-pane fade" id="panelLinkCases">
	<div class="row-fluid">
		<div class="span2"><label for="#linkCaseSearch">Search Cases</label></div>
		<div class="span10"><input type="text" id="linkCaseSearch" placeholder="E.g. Subject Title, Description, Category" style="width:98%;"></div>
	</div>
	<hr>
	<div class="row-fluid">
		<div class="span6">
			<div class="span4">
				<label for="#linkCaseID">Case ID</label>
			</div>
			<div class="span8">
				<input type="text" id="linkCaseID">
			</div>
		</div>
		<div class="span6">
			<div class="span4">
				<label for="#linkFeedbackDate">Incident Date</label>
			</div>
			<div class="span8">
				<input type="text" class="datepicker" id="linkFeedbackDate">
			</div>
		</div>
	</div>
	<div class="fluid">
		<div class="span6">
			<div class="span4">
				<label for="#linkAgency">Agency</label>
			</div>
			<div class="span8">
				<select name="linkAgency" id="linkAgency">
					<option value="NEA">NEA</option>
					<option value="AVA">AVA</option>								
					<option value="NEA">NEA</option>
					<option value="NEA">NEA</option>
					<option value="NEA">NEA</option>
					<option value="NEA">NEA</option>
					<option value="NEA">NEA</option>
				</select>
			</div>
		</div>
		<div class="span6">
			<div class="span8 offset4">
				<button type="submit" class="pure-button pure-button-primary tailButton">Search</button>
			</div>
		</div>
	</div>
	<div class="row-fluid">
		<h3></h3>
		<hr class="slimLine">
	</div>
	<div class="row-fluid inboxTable">
		<table cellpadding="0" cellspacing="0" border="0" class="display dataTable" id="linkCaseTable" width="100%" aria-describedby="" style="width: 100%;">
			<colgroup>
			<col span="1" style="width: 11%;">
			<col span="1" style="width: 20%;">
			<col span="1" style="width: 10%;">
			<col span="1" style="width: 15%;">
			<col span="1" style="width: 17%;">
			<col span="1" style="width: 17%;">
			<col span="1" style="width: 10%;">
		</colgroup>
		<thead>
			<tr>
				<th>Case ID</th>
				<th>Subject Title</th>
				<th>Category</th>
				<th>Case Status</th>
				<th>Incident Date</th>
				<th>Due Date</th>
				<th>Agency</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>201365218456</td>
				<td>Pile of rubbish left at HDB block</td>
				<td>Illegal Dumping</td>
				<td>Pending HDB</td>
				<td>25-Aug-2013</td>
				<td>23-Aug-2013</td>
				<td>HDB</td>
			</tr>
		</tbody>
	</table>
</div>				
</div>